<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
</head>
<body>

<!-- 地图容器 -->
<div id='container' style="width: 100%;height: 80vh;margin: 20px auto;"></div>

<!-- 引入jQuery库 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 引入高德地图API -->
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=4fbb5ae31246fb4337678f7649c87b1b"></script>
<script type="text/javascript">

    // 存储司机位置
    var position = [], center = [115.113739, 36.711773];
    // 存储司机信息
    var driverInfo = {};

    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 10,
        center: [116.402023, 39.906977] // 初始中心点
    });

    // 初始化坐标信息
    getDriverInfo({});

    // 定期获取坐标信息，每5秒更新一次
    setInterval(function () {
        getDriverInfo({});
    }, 5000);

    // 存储所有司机的标记对象
    var allDriverMarker = {};

    // 创建司机标记
    const createMarker2 = (data) => {
        // 循环司机数据
        for (var i in data) {
            if (data[i].lastPoint) {
                var arr = data[i].lastPoint.split(",");

                // 如果该司机已经有标记，则移动标记到新的位置
                if (allDriverMarker[data[i].id]) {
                    allDriverMarker[data[i].id].moveTo(arr, 500);
                } else {
                    // 否则创建一个新的标记
                    var temp = new AMap.Marker({
                        // content: '<div onclick="fenpei(' + data[i].id + ')" ass="marker-route marker-marker-bus-from"><img style="width: 50px;height: 50px" src="' + data[i].avatar + '"/><img src="https://webapi.amap.com/images/car.png"/><span  >' + data[i].user_name + '</span></div>',
                        position: arr,
                        map: map,
                        icon: "https://webapi.amap.com/images/car.png",
                        offset: new AMap.Pixel(-26, -13),
                        autoRotation: true,
                    });

                    // 将标记添加到地图上
                    map.add(temp);
                    // 存储标记对象
                    allDriverMarker[data[i].id] = temp;
                }
            } else {
                // 如果司机没有位置信息且已有标记，则移除标记
                if (allDriverMarker[data[i].id]) {
                    map.remove(allDriverMarker[data[i].id]);
                }
            }
        }

        // 清理不再存在的司机标记
        for (var i in allDriverMarker) {
            var flag = true;
            for (var j in data) {
                if (data[j].id == i) {
                    flag = false;
                    break;
                }
            }
            if (flag) {
                map.remove(allDriverMarker[i]);
                allDriverMarker[i] = null;
            }
        }
    }


    // 模拟请求司机信息
    function getDriverInfo(data) {
        // 生成随机数用于模拟位置变化
        var rand1 = Math.ceil(Math.random() * 10);
        var rand2 = Math.ceil(Math.random() * 10);
        var rand3 = Math.ceil(Math.random() * 10);

        // 模拟异步请求
        setTimeout(function () {
            var data = [
                {
                    user_name: '张三',
                    avatar: '鲁A 942323',
                    id: '1',
                    lastPoint: '115.11' + rand1 + '739,36.71' + rand3 + '773'
                },
                {
                    user_name: '李四',
                    avatar: '鲁A 942323',
                    id: '2',
                    lastPoint: '115.12' + rand1 + '739,36.71' + rand2 + '773'
                },
                {
                    user_name: '王五',
                    avatar: '鲁A 942323',
                    id: '3',
                    lastPoint: '115.13' + rand2 + '739,36.71' + rand3 + '773'
                },
            ];

            // 更新中心点
            for (var i in data) {
                if (data[i].lastPoint != null) {
                    center = data[i].lastPoint.split(",");
                    break;
                }
            }

            // 如果还没有司机标记，则设置缩放级别和中心点
            if (Object.keys(allDriverMarker).length === 0) {
                map.setZoomAndCenter(14, center);
            }

            // 存储司机信息
            driverInfo = data;

            // 创建司机标记
            createMarker2(data);
        }, 1000);
    }

    // 设置地图视图以适应所有的标记
    map.setFitView(null, false, [150, 60, 100, 60]);
</script>

</body>
</html>